// src/components/Top.tsx
import React from "react";

// children 是 React 组件的一个特殊属性，用于传递子元素（可以是文本、组件、元素等）。
// React.ReactNode 是 React 提供的一个类型，表示任何可以被渲染的内容，children 可以是任何合法的

// 定义组件的 props 类型
interface TopProps {
    children: React.ReactNode; // 子元素，可以是文本、组件等
    back?: boolean; // 是否显示返回按钮，默认为 false
    onBack?: () => void; // 返回按钮点击事件的回调函数
}

// 定义样式
const styles = {
    top: {
        position: "fixed",
        top: 0,
        left: 0,
        width: "100%",
        zIndex: 10907,
        background: "rgb(55, 68, 134)",
        color: "rgb(255, 255, 255)",
        fontSize: "20px",
        fontWeight: "normal",
        lineHeight: "45px",
        textAlign: "center",
        height: "50px",
        // React.CSSProperties 是 React 提供的一个类型，包含了所有合法的 CSS 属性及其对应的值类型。
    } as React.CSSProperties,
    letter: {
        opacity: 0, // 初始透明度为 0，用于动画效果
    } as React.CSSProperties,
    backButton: {
        position: "absolute",
        left: 0,
        marginLeft: "20px",
    } as React.CSSProperties,
};

// 注册动画
const registerMoveAnimation = () => {
    const styleSheet = document.styleSheets[0];
    styleSheet.insertRule(
        `
        @keyframes move {
            from {
                opacity: 0;
                transform: translateY(300%);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    `,
        styleSheet.cssRules.length
    );
};

// 注册动画（只注册一次）
registerMoveAnimation();

// 自定义钩子：处理字母动画逻辑
const useAnimatedLetters = (children: React.ReactNode) => {
    const [animate, setAnimate] = useState<boolean>(true);

    useEffect(() => {
        // 当 children 发生变化时，触发动画
        setAnimate(true);
    }, [children]);

    // 将 children 转换为字符串，并将每个字符包裹在 <span> 中
    const getAnimatedLetters = useCallback(() => {
        if (typeof children === "string") {
            return children.split("").map((letter, index) => (
                <span
                    style={{
                        ...styles.letter,
                        animation: animate
                            ? `move 1s ${
                                  index * 0.1
                              }s cubic-bezier(0.46, -0.15, 0.49, 1.48) forwards`
                            : "none",
                    }}
                    key={index}
                >
                    {letter}
                </span>
            ));
        }
        return children; // 如果不是字符串，直接返回 children
    }, [children, animate]);

    return getAnimatedLetters;
};

// Top 组件
const Top = memo(({ children, back = false, onBack }: TopProps) => {
    const navigate = useNavigate(); // 获取导航函数
    const getAnimatedLetters = useAnimatedLetters(children); // 获取动画字母

    // 处理返回按钮点击事件
    const handleBack = useCallback(() => {
        if (onBack) {
            onBack(); // 如果传递了 onBack，调用它
        } else {
            navigate(-1); // 如果未传递 onBack，默认返回上一页
        }
    }, [onBack, navigate]);

    return (
        <>
            <div style={styles.top}>
                <div id="title">
                    {back && ( // 根据 back 属性的值决定是否显示返回按钮
                        <span style={styles.backButton} onClick={handleBack}>
                            <React.Icons.LeftOutline />
                        </span>
                    )}
                    {getAnimatedLetters()}
                </div>
            </div>
            <div style={{ paddingTop: "50px" }}></div>
        </>
    );
});

export default Top;